<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/ty.css"/>
		<style type="text/css">
			#fd{background:rgba(0,233,233,0.2);position: absolute;display:none;z-index: 99;border-radius: 50%;}
			#box{width:810px;height:320px;overflow: hidden; background: url(img/001.jpg) center;background-size: 100% 100%;position: absolute;top:20px;
			left: 20px;}
			#minbox{width:810px;height:64px;overflow: hidden;position: absolute;top:340px;left: 20px;}
			#minbox_ner{width:2592px;height:64px;position: absolute;left:-324px}
			#minbox_ner img{width:324px;height: 64px;float: left;}
			#bigbox{width:320px;height:320px;overflow: hidden;position: fixed;top:20px;left:850px;display:none;border-radius: 50%;z-index: 9;}
			#bigimg{width:1620px;height:640px;position: absolute;}	
			#minbox span{display:block;width:20px;height:30px;font-size: 25px;position: absolute;top:20px;z-index: 2;background: rgba(3,3,3,0.4);}
			#minleft{left:0;}
			#minright{right: 0;}	
		</style>
	<script src="js/move.yintao1.05.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<div id="fd">
				
			</div>
		</div>
		<div id="minbox">
			<span id="minleft"><a href="#"><</a></span>
				<span id="minright"><a href="#">></a></span>
			<div id="minbox_ner">
				<img src="img/004.jpg"/>
				<img src="img/001.jpg"/>
				<img src="img/002.jpg"/>
				<img src="img/003.jpg"/>
				<img src="img/004.jpg"/>
				<img src="img/001.jpg"/>
				<img src="img/002.jpg"/>
				<img src="img/003.jpg"/>
			</div>				
		</div>
		
		<div id="bigbox">
			<img id="bigimg" src="img/001.jpg"/>
		</div>
	</body>
	<script type="text/javascript">
		var box =document.getElementById("box");
		var minleft=document.getElementById("minleft");
		var minright =document.getElementById("minright");
		var bigbox =document.getElementById("bigbox");
		var minbox =document.getElementById("minbox_ner");
		var bigimg=document.getElementById("bigimg");
		var fd = document.getElementById("fd");
		var mbox = document.getElementById("minbox");
		var num = 0;			
		 var minboxner = minbox.children;
		 box.addEventListener("mouseover",function(){
		 fd.style.display="block";
			bigbox.style.display="block";
			fdwidth = box.offsetWidth*bigbox.offsetWidth/bigimg.offsetWidth;
			fdheight = box.offsetHeight*bigbox.offsetHeight/bigimg.offsetHeight;
			bigfdtop = bigbox.offsetHeight/fdheight;
			bigfdleft = bigbox.offsetWidth/fdwidth;
			fd.style.width=fdwidth+"px";
			fd.style.height=fdheight+"px";	
			clearInterval(t);
		 })
		box.addEventListener("mousemove",function(ele){	
			var e = ele||event;			
			var fdleft = e.clientX-box.offsetLeft-fd.offsetWidth/2;
			console.log(fdleft)
			var fdtop = e.clientY-box.offsetTop-fd.offsetHeight/2;
			fdleft = Math.min(Math.max(0,fdleft),box.offsetWidth-fd.offsetWidth);
			fdtop = Math.min(Math.max(0,fdtop),box.offsetHeight-fd.offsetHeight);
			fd.style.left=fdleft+"px";
			fd.style.top=fdtop+"px";
			bigbox.style.left=e.clientX-box.offsetLeft+fd.offsetHeight/4+"px";
			bigbox.style.top = e.clientY-box.offsetTop+fd.offsetHeight/4+"px"
			bigimg.style.left=-fdleft*bigfdleft+"px";
			bigimg.style.top=-fdtop*bigfdtop+"px";	
		})
		box.addEventListener("mouseout",function(){
			fd.style.display="none";
			bigbox.style.display="none";
		})
		function lunbo(){					
			++num;
			if(num>=6){
					minbox.style.left=-324+"px";
					num=2;
			}
			animate(minbox,{left:-324*num},				
			box.style.background="url\(img\/00"+num+".jpg\)",
			bigimg.src="img\/00"+num+".jpg"
			);	
		}
			t = setInterval(lunbo,2000)
		mbox.onmouseover=function(){
			clearInterval(t);
		}
		box.onmouseover=function(){
			clearInterval(t);
			
		}
		mbox.onmouseout=function(){
			t = setInterval(lunbo,2000)
		}
		box.onmouseout=function(){
			t = setInterval(lunbo,2000)
		}
		minleft.onclick=function(){
			++num
			if(num>=6){
					minbox.style.left=-324+"px";
					num=2;
				}
			console.log(num);
			animate(minbox,{left:-324*num},
			box.style.background="url\(img\/00"+num+".jpg\)",
			bigimg.src="img\/00"+num+".jpg"
			)
		}
		minright.onclick=function(){
			num--;	
			console.log(num)
			if(num <= 0){
				num = 4 ;
				minbox.style.left=-1620+"px";					
			}
			console.log(num)
			animate(minbox,{left:-324*num},				
			box.style.background="url\(img\/00"+num+".jpg\)",
			bigimg.src="img\/00"+num+".jpg"
			);			
		}
	</script>
</html>
